<template>
	<view class="VIPCenter">
		<view class="VIP-content">
			<view class="VIP-content-top">
				<view class="content-top-left">
					<image :src="userinfo.avatar"></image>
				</view>
				<view class="content-top-right">
					<view class="top-right-free">
						您当前为免费会员
					</view>
					<view class="top-right-effective">
						购买后有效期顺延
					</view>
				</view>
			</view>
			<view class="VIP-content-middle">
				<view class="vip-money" :id="[id == item.id?'active':'']"  @click="gotoPay(index,item)" v-for="(item,index) in roles" :key="item.id">
					<view class="vip-name">
						{{item.name}}
					</view>
					<view class="money">
						￥{{item.charge}}
					</view>
					<view class="day">
						{{item.expire_days}}天
					</view>
				</view>
			</view>
		</view>
		<view class="VIP-buy">
			<view class="VIP-buy-left">
				￥{{money}}
			</view>
			<view v-if="money!=0" @click="buy"  class="VIP-buy-right">
				立即购买
			</view>
			<view v-else class="gray">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
import { getVIPRoles } from '@/request/VIP.js';
import { getUserInfo } from '@/request/user.js';
export default {
	data() {
		return {
			roles: [],
			userinfo:{},
			money:0,
			id:'',
			name:''
		};
	},
	// onLoad: function(options) {
	// 	setTimeout(function() {
	// 		console.log('下拉刷新');
	// 	}, 500);
	// 	uni.startPullDownRefresh();
	// },
	onPullDownRefresh() {
		console.log('停止刷新');
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 500);
	},
	onShow() {
		this.getRoles();
		this.getUser()
	},
	methods: {
		buy(){
			uni.navigateTo({
				url:`/pages/my/pay?id=${this.id}&total=${this.money}&name=${this.name}&type=role`
			})
		},
		async getRoles() {
			let res = await getVIPRoles();
			// console.log(res);
			this.roles = res.data.data;
			console.log(this.roles);
		},
		async getUser(){
			let res = await getUserInfo()
			// console.log(res)
			this.userinfo = res.data.data
			console.log(this.userinfo)
		},
		gotoPay(index,item){
			this.money = this.roles[index].charge
			this.id = item.id
			this.name = item.name
		}
	}
};
</script>

<style lang="less">
	body{
		background-color: #f2f2f2;
	}
#active{
		border: 1rpx solid #cea200;
			color:#cea200 ;
	}
	.VIPCenter{
		.VIP-content{
			height: calc(100vh - 120rpx);
			.VIP-content-top{
				padding: 30rpx;
				display: flex;
				align-items: center;
				background-color: #fff;
				.content-top-left{
					image{
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}
				}
				.content-top-right{
					margin-left: 30rpx;
					font-size: 32rpx;
					.top-right-free{
						
					}
					.top-right-effective{
						margin-top: 10rpx;
					}
				}
			}
			.VIP-content-middle{
				display: flex;
				background-color: #fff;
				margin-top: 20rpx;
				padding: 30rpx;
				justify-content: space-around;
				.vip-money{
					height: 300rpx;
					width: 200rpx;
					border: 1rpx solid #ddd;
					border-radius: 26rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					.vip-name{
						font-size: 32rpx;
						font-weight: 700;
					}
					.money{
						color: #cea200;
						font-size: 36rpx;
						font-weight: 700;
					}
					.day{
						font-size: 32rpx;
						color: #bebebe;
					}
				}
			}
		}
		.VIP-buy{
			height: 120rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.VIP-buy-left{
				margin-left: 30rpx;
				color: red;
				font-size: 39rpx;
			}
			.VIP-buy-right{
				height: 120rpx;
				width: 300rpx;
				line-height: 120rpx;
				text-align: center;
				background-color: #000;
				color: #fff;
			}
		}
	}
	.gray{
		height: 120rpx;
		width: 300rpx;
		line-height: 120rpx;
		text-align: center;
		background-color: #ddd;
		color: #fff;
	}
</style>
